{include file="common/head"}
<style>
	a {
		text-decoration: none;
	}

	.title {
		font-weight: bold;
	}

	input {
		display: initial !important;
	}

	#specs {
		position: absolute;
		width: 330px;
		left: 200px;
		top: 210px;
		background-color: #f7f7f7;
		box-shadow: 0 0 5px #fff;
		padding: 10px;
		z-index: 20;
		display: none;
	}

	.specs_item {
		border: 1px solid #ccc;
		margin: 4px;
		padding: 4px;
		background-color: #fff;
		cursor: pointer;
		line-height: 24px;

	}


	.row {
		margin: 8px;
	}

	.chose {
		background-color: #f60;
	}
</style>
<link rel="stylesheet" href="/static/flatpickr/flatpickr.min.css">
<script src="/static/flatpickr/flatpickr.min.js"></script>
<title>订单出货录入</title>
</head>

<body>
	<div class="container-fluid">
		<!-- <form action="/index.php/order/order_add" method="post"> -->
		<div class="title" style="height:50px;line-height: 50px;padding:10px;" class="row">
			<div class="col-6">
				<h2>订单出货录入 Delivery</h2>
			</div>
			<div class="col text-right">

			</div>
		</div>

		<div class="row">
			<div id="customer_info" class="col-5" style="border:1px solid #ccc;">
				<div class="row">
					<div class="col-4 title">客户单号PO#<br />Purcharse Order</div>
					<div class="col">
						<input id="order_id" list="orders" name="order_id"  class="form-control" />
											
						<datalist id="orders" >
							<option value="">选择出货订单 Po#</option>
							{foreach $order_list as $kv}
							<option value="{$kv['order_no']}" />
							{/foreach}
						</datalist>

					</div>
				</div>
				<div class="row" >
					<div class="col-4 title">订单总数<br />PO# QTY</div>
					<div class="col">
						<input type="text" name="order_qty" id="order_qty" class="form-control"
							placeholder="订单总数 PO# QTY" disabled />
					</div>
				</div>
				<div class="row">
					<table id="order_detail" class="table table-sm table-hover table-striped table-bordered"></table>
					<!-- <div class="col-4 title">已发货总数<br />Delivered QTY</div>
					<div class="col">
						<input type="text" id="delivered_qty" name="delivered_qty" class="form-control"
							placeholder="已发货总数 delivered qty" disabled />
					</div> -->
				</div>
				<hr />
				<div class="row">
					<div class="col-4 title">司机/车牌<br />Driver</div>
					<div class="col">
						<input type="text" id="driver_name" name="driver_name" class="form-control"
							placeholder="司机 Driver's name" />
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">司机联系电话<br />Driver's mobile</div>
					<div class="col">
						<input type="text" id="driver_mobile" name="driver_mobile" class="form-control"
							placeholder="司机联系电话 Driver's mobile" />
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">备注<br />Memo</div>
					<div class="col">
						<input type="text" id="memo" name="memo" class="form-control" placeholder="备注" />
					</div>
				</div>

				<div style="text-align: center;margin:10px;">
					<button type="button" id="order_submit" class="btn btn-primary ">提交发货单submit</button>

				</div>
			</div>

			<div class="col" style="border:1px solid #ccc;margin-left:4px;box-shadow: 1px 1px 4px #666;padding:8px;">
				<table id="goods_list" class="table table-hover table-striped table-bordered">
					<tr class="table-info">
						<th>品名</th>
						<th>规格</th>
						<th>件数</th>
						<th>每件数量</th>
						<th>小计</th>
						<th>产品备注 </th>
						<th>
							<!-- <button type="button" class="btn btn-sm btn-primary" id="goods_add"><span
									class="bi-plus"></span></button> -->
						</th>
					</tr>
					<tr class="goods_row">
						<td colspan="5">没有产品...</td>

					</tr>
				</table>

			</div>
		</div>

		<!-- </form> -->


		<div id="specs" class="col" >
			<div class="title text-center">产品规格选择</div>
			{foreach $specs as $kv}
			<div class="specs_item" goods_id="{$kv['goods_id']}" id="{$kv['id']}" name="{$kv['name']}">
				{$kv['name']}
				<input type="checkbox" style="width:18px;height:18px" />
			</div>
			{/foreach}
		</div>


		<div id="mask"></div>
	</div>
	<script>
		var goods_list = []
		var current_item = {};

		$(function () {
			flatpickr("#delivery_date", {});

			// $("#goods_add").on('click', function () {
			// 	$("#mask").show();
			// 	$("#specs").show()
			// });

			// $("#mask").on('click', function () {
			// 	$("#specs,#mask").hide();

			// });

			// //产品点击处理，显示下面的规格
			// $(".goods_item").on('click', function () {
			// 	$(".goods_item").removeClass('chose');
			// 	$(this).addClass('chose');
			// 	current_item = { 'goods_id': $(this).attr('goods_id'), 'name': $(this).attr('goods_name') };
			// 	console.log(current_item);
			// 	$("#specs").show();
			// 	$(".specs_item").hide().each(function () {
			// 		if ($(this).attr('goods_id') == current_item.goods_id) {
			// 			$(this).show();
			// 		}
			// 	})
			// })

			// $(".specs_item").on('click', function () {
			// 	$(".specs_item").removeClass('chose');
			// 	$(this).addClass('chose');
			// })

			//规格数量输入处理
			$("#goods_list").on('blur', "input", function (e) {
				var type = $(this).attr('name');
				var id = $(this).parents('tr').attr('id');
				var val = $(this).val();
				//就是处理产品数组对应规格的数量
				if($(this).attr('name')!='memo' && (val<0 || isNaN(val))) {
					$(this).val(0);
					return false;
				} 

				for (var i = 0; i < goods_list.length; i++) {
					if (id == goods_list[i].id) {
						if (type == 'qty') {
							goods_list[i].qty = val;
						} else if (type == 'pack_qty') {
							goods_list[i].pack_qty = val;
							if(goods_list[i].pack_qty>0 && goods_list[i].qty_of_pack>0){
								goods_list[i].qty= (goods_list[i].qty_of_pack*goods_list[i].pack_qty);
							}
						} else if (type == 'qty_of_pack') {
							goods_list[i].qty_of_pack = val;
							if(goods_list[i].pack_qty>0 && goods_list[i].qty_of_pack>0){
								goods_list[i].qty= (goods_list[i].qty_of_pack*goods_list[i].pack_qty);
							}
						} else {
							if (id == goods_list[i].id) {
								goods_list[i].memo = val;
							}
						}


						if(goods_list[i].qty > $("#ud_"+id).text()*1){
							layer.msg('出货数超出订单未发货数:'+$("#ud_"+id).text());
							$(this).focus();
							return;
						}

					}
				}
				refresh_goods();
				console.log(goods_list)
			})

			//删除产品
			$("#goods_list").on('click', '.btn-danger', function () {
				var id = $(this).parents('tr').attr('id');
				layer.confirm('是否删除?', ['yes', 'no'],
					function () {
						for (var i = 0; i < goods_list.length; i++) {
							console.log(id == goods_list[i].id)
							if (id == goods_list[i].id) {
								goods_list.splice(i, 1);
								break;
							}
						}
						refresh_goods();
						layer.msg('ok')

					},
					function () {
						layer.msg('ok')
					})


			})

			//规格选择处理，加入数组中，最后显示出来
			$("#specs,#order_detail").on('click', 'input', function () {
				var el = $(this).parents('tr');
				var specs = { id: el.attr('id'), name: el.attr('specs_name'), goods_id: el.attr('goods_id'), goods_name: el.attr('goods_name'), qty: 0, pack_qty: 0, qty_of_pack: 0, memo: '' }
				//console.log(goods_list.length);

				var exist = 0;
				for (var i = 0; i < goods_list.length; i++) {
					if (goods_list[i].id == specs.id) {
						exist = 1;
						break;
					}
				}
				if (exist == 0) {
					goods_list.push(specs);
				}
				refresh_goods()
				console.log(goods_list);
			})

			$("#customer_info input,#customer_info select").on('focus', function () {
				$(this).css({ 'background-color': '#f90' });
			}).on('blur', function () {
				$(this).css({ 'background-color': '#fff' });
			})

			$('#order_id').on('keydown', function(event) {
				if (event.keyCode === 13) {
					console.log('回车键被按下！');
					// 执行你的代码，例如提交表单
					$("#order_id").trigger('change');
				}
			});

			//找出订单详情
			$("#order_id").on('change', function () {
				//console.log($(this).val())
				var order_no = $(this).val();
				if (!order_no) return false;

				$.post('/order/order_detail', { order_no: order_no, detail: 1 }, function (res) {
					console.log(res.data)
					if (res.code) {
						goods_list = [];
						refresh_goods();
						$("#order_qty").val(res.data['qty']);
						$("#delivered_qty").val(res.data['delivered_qty']);

						var specs = res.data.order_list;
						// var str = "<div class='title text-center'>选择出货产品规格</div>";
						var order_dt="<thead class='table-info'><th>品名规格</th><th>库存</th><th>订单数</th><th>已发货</th><th>未发货</th><th></th></thead>"

						for (var i = 0; i < specs.length; i++) {
							// str += "<div class='specs_item' goods_id='" + specs[i].goods_id + "' id='" + specs[i].specs_id + "'goods_name='" + specs[i].goods_id_name + "' specs_name='" + specs[i].specs_id_name + "'>" + specs[i].name;
							// str += "<input type='checkbox' class='form-check-input ' /></div>";

							//显示表格
							order_dt += "<tr class='specs_item' goods_id='" + specs[i].goods_id + "' id='" + specs[i].specs_id + "'goods_name='" + specs[i].goods_id_name + "' specs_name='" + specs[i].specs_id_name + "'>";
							order_dt += "<td>"+specs[i].goods_id_name+"</td>";
							order_dt += "<td>"+specs[i].storage+"</td>";
							order_dt += "<td>"+specs[i].qty+"</td>";
							order_dt += "<td>"+specs[i].delivery_qty+"</td>";
							order_dt += "<td id='ud_"+specs[i].specs_id+"'>"+specs[i].undelivery_qty+"</td>";
							order_dt += "<td><input type='checkbox' class='form-check-input fs-5' /></td></tr>";

						}
						$("#order_detail").html(order_dt);

						// $("#specs").empty().append(str);
						// $("#goods_add").trigger('click');

					} else {
						layer.open({ content: res.msg })
					}
				})
			})

			//提交单据
			function order_submit() {
				var order_no = $("#order_id").val();
				var driver_name = $("#driver_name").val();
				var driver_mobile = $("#driver_mobile").val();
				var memo = $("#memo").val();

				var order = {};

				if (!order_no || !driver_name || !driver_mobile) {
					layer.open({ content: "订单/司机信息 未选择！" });
					return false;
				}

				if (!goods_list.length) {
					layer.open({ content: "产品还未选择！" });
					return false;
				}

				for (var i = 0; i < goods_list.length; i++) {
					if (goods_list[i].qty == 0) {
						layer.open({ content: "产品数量输入不正确,请检查！" });
						return false;
					}
				}

				order.order_no = order_no;
				order.driver_name = driver_name;
				order.driver_mobile = driver_mobile;
				order.memo = memo;
				order.goods = goods_list;

				//console.log(order);
				layer.confirm('是否确定提交本次交货单？', ['确定', '再检查一下'], function () {
					$.post('/order/delivery_add', order, function (res) {
						if (res.code == 1) {
							layer.open({ 'content': '交货单已保存！' });
							goods_list = [];
							current_item = {};
							refresh_goods();
							location.href="/order/delivery";

						} else {
							layer.open({ content: res.msg });
						}
					})
				}, function () {
					layer.msg('yes!');
				})

			}

			$("#order_submit").on('click', function () {
				return order_submit();
			})

			$("#goods_list").on('focus', 'input', function () {
				$(this).css({ 'background-color': '#f90' });
			}).on('blur', function () {
				$(this).css({ 'background-color': '#fff' });
			})



			function refresh_goods() {
				$(".goods_row").remove();
				var str = '';
				for (var i = 0; i < goods_list.length; i++) {
					var tr = "<tr class='goods_row' id='" + goods_list[i].id + "'>";
					tr += "<td>" + goods_list[i].goods_name + "</td>";
					tr += "<td>" + goods_list[i].name + "</td>";
					tr += "<td><input type='number' class='form-control' name='pack_qty' value='" + goods_list[i].pack_qty + "' style='width:80px;' ></td>";
					tr += "<td><input type='number' class='form-control' name='qty_of_pack' value='" + goods_list[i].qty_of_pack + "' style='width:80px;'></td>";
					tr += "<td><input type='number' class='form-control' name='qty' value='" + goods_list[i].qty + "' style='width:100px;'></td>";
					tr += "<td><input type='text' class='form-control' name='memo' value='" + goods_list[i].memo + "' ></td>";
					tr += "<td><button type='button' class='btn btn-sm btn-danger'><span class='bi-x'></span></button></td>";
					tr + "</tr>";
					str += tr;
				}
				$("#goods_list tr").after(str)
			}
		})

	</script>
</body>

</html>